<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="${ctxStatic }/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.picker.min.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.indexedlist.css">
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.poppicker.css">
<link rel="stylesheet" href="${ctxStatic }/modules/wx/css/multiPage.css">
<link rel="stylesheet" href="${ctxStatic }/wx/css/day_cars.css" />
</head>
<style>
		.xiakeradio{
			width:12px;
			height: 12px;
			border-radius:50%  !important;
			border: 1px solid #16C59B !important;
			color: #16C59B !important;
			background: #16C59B !important;
		}
		.mui-indexed-list{
			height: 100%;
		}
	</style>
<body>
		<!--页面主结构开始-->
		<div id="app">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<div id="days_car" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" id="back" class="mui-left  mui-btn  mui-btn-link mui-btn-nav mui-pull-left"  style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title"  style="color: #fff;">按天包车</h1>
			</div>
			<div class="mui-page-content">
				 <div class="mui-scroll-wrapper">
				 	  <div class="mui-scroll">
				 	  	 <div class="days_car_wrap">
				 	  	 	     <form id="queryForm" class="mui-input-group" method="post" action="${ctxWx}/day/dayResult">
				 	  	 	     	<input type="hidden" name="rentType"  value="2"/>
				 	  	 	     	<input type="hidden" name="pageSize"  value="100"/>
				 	  	 	     	<input type="hidden" name="pageNo"  value="1"/>
				 	  	 	     	<div class="mui-input-row">
				 	  	 	     		 <span class="day_c_ico">
				 	  	 	     		 	 <img  src="${ctxStatic }/wx/img/day_img/didian_antianbaoche@2x.png" />
				 	  	 	     		 </span>
		                                 <label>出发城市</label>
		                                    <input type="hidden" id="cityRecord"/>
						                    <input type="hidden" id="spottypes"/>
		                                 	<input class="departCode" id="siteid" name="departcity.siteid" type="hidden" ${empty tRentproduct.departcity.siteid?'data-autocity="yes"':'' } value="${tRentproduct.departcity.siteid }">
		                                    <input class="departName opt-city-choose citys" data-type="0,b" name="departcity.sitename" type="text" id="depart" value="" placeholder="点击选择出发地" readonly/>
		                             </div>
		                             <div class="mui-input-row">
		                             	<span class="day_c_ico">
				 	  	 	     		 	 <img  src="${ctxStatic }/wx/img/day_img/shijian_antianbaoche@2x.png" />
				 	  	 	     		 </span>
		                                 <label>出发时间</label>
		                                 <input id="daystime" type="text" readonly="readonly"  placeholder="请选择出发时间" name="fromdatestr" value="${defaultTime}">
		                             </div>
		                             <div class="mui-input-row ">
		                             	<span class="day_c_ico">
				 	  	 	     		 	 <img  src="${ctxStatic }/wx/img/day_img/fanwei_antianbaoche@2x.png" />
				 	  	 	     		 </span>
				  	  	   	            <label>包车范围</label>
				  	  	   	            <div class="cross_city">
				  	  	   	            	<label>
				  	  	   	            	     <span>跨市</span>
				  	  	   	            	     <input type="radio" class="xiakeradio" name="tabType" checked="checked" value="跨市" class="kuashi"/>
				  	  	   	            	</label>
				  	  	   	            </div>
				  	  	   	            <div class="inside_city">
				  	  	   	            	<label>
				  	  	   	            		 <span>市内</span>
                                                 <input type="radio"  class="xiakeradio" name="tabType" value="市内" class="kuashi"/>
				  	  	   	            	</label>
				  	  	   	            </div>
				  	  	   	        </div>
				  	  	   	        <div class="mui-input-row ">
				  	  	   	        	<span class="day_c_ico">
				 	  	 	     		 	 <img src="${ctxStatic }/wx/img/day_img/tianshu_antianbaoche@2x.png" />
				 	  	 	     		 </span>
				  	  	   	            <label>包车天数</label>                
				  	  	   	            <div id="ic_one"  class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
				  	  	   	                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
				  	  	   	                <input class="mui-input-numbox" type="number" id="num" name="daysnum" />
				  	  	   	                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				  	  	   	            </div>
				  	  	   	            <div id="ic_half"  class="mui-numbox" data-numbox-step='1' data-numbox-min='0.5' data-numbox-max='10'>
				  	  	   	                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
				  	  	   	                <input class="mui-input-numbox" type="number" id="num1" name="daysnum"/>
				  	  	   	                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				  	  	   	            </div>
				  	  	   	        </div>
				  	  	   	        <div class="day_cars_btn ">
				  	  	   	        	<button type="button" id="sub">下一步</button>
				  	  	   	        </div>
		                         </form>
				 	  	 </div>
				 	  </div>
				 </div>
			</div>
		</div>
		<!--选择城市-->
		<div id="city" class="mui-page">
		<div class="city-bar mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
			<a id="close" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
			<h1 class="mui-center mui-title" style="color: #fff;">选择站点</h1>
		</div>
		<div class="mui-page-content">
			<div id="list" class="mui-indexed-list listBox" >
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索站点">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> <a>I</a> <a>J</a> <a>K</a> <a>L</a> <a>M</a> <a>N</a> <a>O</a> <a>P</a> <a>Q</a> <a>R</a> <a>S</a> <a>T</a> <a>U</a> <a>V</a> <a>W</a> <a>X</a> <a>Y</a> <a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner">
					<div class="mui-indexed-list-empty-alert">没有数据</div>
					<ul id="indexListContent" class="mui-table-view"></ul>
				</div>
			</div>
		</div>
	</div>
		<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
		<script src="${ctxStatic }/mui/js/mui.min.js"></script>
		<script type="text/javascript" src="${ctxStatic }/mui/js/mui.view.js" ></script>
		<script type="text/javascript" src="${ctxStatic }/mui/js/mui.picker.min.js" ></script>
		<script type="text/javascript" src="${ctxStatic }/mui/js/mui.dtpicker.js" ></script>
		<script type="text/javascript" src="${ctxStatic }/mui/js/mui.indexedlist.js" ></script>
		<script type="text/javascript" src="${ctxStatic }/mui/js/mui.poppicker.js" ></script>
		<script>
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#days_car'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			view.addEventListener('pageShow', function(e) {
				if(e.detail.page.id == 'city') {
					document.getElementById('search').focus();
					// 站点数据
					getSiteData();
				}
			});
		})(mui);
		var cityHtml = '';
		var destHtml = '';
		$(function(){
			//默认出发地
			$.post("${ctxFront }/sms/ipLocation", function(d) { //d==城市名
				$('#depart').val(d);
			});
			$('.mui-indexed-list-inner').on('tap', 'li.mui-indexed-list-item', function(event) {
				giveCityData($(this));
			});	
			$('#back').on('tap', function(){
						window.location.href = '${ctxWx}/pu/index';
					})
			// 选择城市
			$('.opt-city-choose').on('tap',function(){
				if($(this).hasClass('departName')) {
					$('#cityRecord').val('depart');
				}
				if($(this).hasClass('destName')) {
					$('#cityRecord').val('dest');
				}
				$('#spottypes').val($(this).attr('data-type'));
				viewApi.go('#city');
			});
		});
		
		// 提交查询表单
			$('#sub').on('tap',function(){
				var msg= '';
				var boardaddrName = $('input[name="departcity.sitename"]').val();
				var offaddrName = $('input[name="destcity.sitename"]').val();
				var time = $('#daystime').val();
				if(boardaddrName == ''){
					msg = '请填写出发地';
				} else if(offaddrName == ''){
					msg = '请填写目的地';
				}else if(time == ''){
					msg = '请填写出发时间';
				}
				if(msg != ''){
					mui.alert(msg, '提示');
				} else {
					mui.post('${ctxWx}/pu/checkTime',{time:time},function(d){
						if(d==1){
							mui.alert(msg, '距离发车时间不足2小时，请重新选择发车时间');
							return;
						}else if(d==2){
							mui.alert(msg, '暂只支持三个月之内产品预定');
							return;
						}else{
							$('#queryForm').submit();
						}
					});
				}
			});
		// 获取站点数据
		function getSiteData() {
			var spottypes = $('#spottypes').val();
			var loaded = false; // 已加载
			var html = '';		
			if(spottypes == '0,b' && cityHtml != '') {
				loaded = true;
				html = cityHtml;
			}
			if(spottypes == '0,2,b' && destHtml != '') {
				loaded = true;
				html = destHtml;
			}
			if(!loaded){			
				$('#indexListContent').html('<li style="text-align:center;margin:20px;font-size:12px;">加载中...</li>');
				$.post('${ctxWx}/data/site/siteJson',{spottypes:spottypes}, function(data) {
					for(var i=0; i<data.length; i++) {
						var item = data[i];
						html += '<li data-group="'+item.character+'" class="mui-table-view-divider mui-indexed-list-group">'+item.character+'</li>';
						for(var j=0; j<item.list.length; j++) {
							var site = item.list[j];
							html += '<li data-value="'+site.siteid+'" data-name="'+site.sitename+'" data-tags="'+site.querycode +'" class="mui-table-view-cell mui-indexed-list-item">';
							html += site.sitename;
							html += '</li>';
						}
					}
					if(spottypes == '0,b') {
						cityHtml = html;
					}
					if(spottypes == '0,2,b') {
						destHtml = html;
					} 
					$('#indexListContent').html(html);
					// 初始化站点数据
					$('#cityStyle').remove();
					var header = document.querySelector('.city-bar');
					var list = document.getElementById('list');
					list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
					new mui.IndexedList(list).search('');
				});
			} else {
				$('#indexListContent').html(html);
				// 初始化站点数据
				$('#cityStyle').remove();
				var header = document.querySelector('.city-bar');
				var list = document.getElementById('list');
				list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
				new mui.IndexedList(list).search('');
			}
		}
		
		// 站点输入框赋值
		function giveCityData(item) {
			var cityRecord = $('#cityRecord');
			if(cityRecord.val() == 'depart') {
				$('.departCode').val(item.attr('data-value'));
				$('.departName').val(item.attr('data-name'));
			}else {
				mui.alert('该操作不能正确执行！');
			}
			viewApi.go('#days_car');
		};
			//选择时间
			Zepto(function(){
				var start_time_picker = new mui.DtPicker({});
					$('#daystime').on('tap',function(){
							setTimeout(function(){
					start_time_picker.show(function(items){
						$("#daystime").val(items.text);
					});
				},200);
				})
			});
			$('.cross_city').on('tap',function(){
				$('#ic_one').show().siblings('#ic_half').hide();
			})
			$('.inside_city').on('tap',function(){
				$('#ic_half').show().siblings('#ic_one').hide();
			})
	</script>
	</body>

</html>